<!--
    LocaleDropdown - 国际化语言选择器
 -->
<template>
    <el-dropdown trigger="click" @command="handleCommand">
        <i class="iconfont icon-zhongyingwen"></i>
        <template #dropdown>
            <el-dropdown-menu>
                <el-dropdown-item v-for="item in localeStore.languageMap" :key="item.lang" :command="item.lang"
                    :disabled="localeStore.languageKey === item.lang">
                    <i class="iconfont icon-zhongyingwen"></i> {{ item.name }}
                </el-dropdown-item>
            </el-dropdown-menu>
        </template>
    </el-dropdown>
</template>

<script setup lang="ts" name="LocaleDropdown">
import { hookI18n } from "@/hooks/hookI18n";
import { useAuthStore } from "@/store";
import { useLocaleStore } from "@/store";

const authStore = useAuthStore();
const localeStore = useLocaleStore();
const { setLocale } = hookI18n();

const handleCommand = (command: LanguageKey) => {
    localeStore.languageKey = command;
    setLocale(command);
    window.location.reload();
};
</script>

<style scoped lang="css"></style>
